<template>
	<div class="shopinfo">
        <div class="card-demo-flex card-demo-content01">
            <div class="shopFace">
                <img src="" alt="">
            </div>
        </div>
        <card :header="{title:'选择预付卡品种'}" class="shopCardHead"></card>
        <checker default-item-class="demo2-item" selected-item-class="demo2-item-selected"  class="shopCard">
            <div cardName="普通预付卡">
                <cell title="普通预付卡" value="" class="cardName"></cell>
                <checker-item value="1" v-for="cardone in cardones" style="width:25.7vw; height:9vh; position:relative; margin:1.6vw;"s>
                    <p><span>{{cardone.price}}</span>元</p>
                    <span><b>￥<b class="oldprice">{{cardone.denomination}}</b></b>现价<i>{{cardone.price}}</i>元</span>
                    <em></em>
<!--                    <h1 hidden="hidden">{{cardone.quantity}}</h1>-->
                    <h2 hidden="hidden">{{cardone.productNo}}</h2>
                </checker-item>
            </div>
<!--
            <div cardName="畅享次卡" class="cardLine">
                <cell title="畅享次卡" value="" class="cardName"></cell> 
                <checker-item key="48" value="7" style="width:25.7vw; height:9vh;position:relative; margin:1.6vw;">
                    <p><span>10</span>次</p>
                    <span><b>￥<h5>80</h5></b>现价<i>58</i>元</span>
                    <em></em>
                    <input type="text" value="06000000000081" hidden class="cardnum">
                </checker-item>
            </div>
            <div cardName="超值体验卡" class="cardLine">
                <cell title="超值体验卡" value="" class="cardName"></cell> 
                <checker-item key="48" value="13" style="width:25.7vw; height:9vh;position:relative; margin:1.6vw;">
                    <p><span>1</span>次</p>
                    <span><b>￥<h5>90</h5></b>现价<i>68</i>元</span>
                    <em></em>
                    <input type="text" value="06000000000081" hidden class="cardnum">
                </checker-item>>
            </div>
-->
            <h4>*具体使用说明请查看用卡须知或咨询店铺</h4>
        </checker>
        <card :header="{title:'店铺环境'}" class="shopImgHead"></card>
        <div class="shopImg" slot="content">
            <img class="previewer-demo-img" v-for="(item, index) in list" :src="item.src" width="" @click="show(index)">
            <previewer :list="list" ref="previewer" :options="options"></previewer>
        </div>
        
        <div class="address">
            <cell title="地址:" value="上海市徐汇区番禺路1028号" class="marginL"></cell>
            <a href="http://api.map.baidu.com/marker?location=$!shop.latitude,$!shop.longitude&title=$!shop.bpName&content=$!shop.detailAddress&output=html&src=大钱信息|大钱包"  rel="nofollow"></a>
        </div>
        <cell title="营业时间:" value="10:00-22:00 周一至周日" class="marginL"></cell>
        <div class="phone" >
            <cell title="联系电话:" value="021-123456" class="marginL" is-link></cell>
            <a href="tel:021-123456"></a>
        </div>
        
        <div class="buyTips">
            <h4>购买须知</h4>
            <h5>一、体验卡/代金卡/优惠券使用规则</h5>
            <p>(1) 体验卡/代金卡/优惠券不能兑换现金；</p>
            <p>(2) 每张体验卡/代金卡/优惠券仅能使用一次，不找零，不退换</p>
            <p>(3) 使用体验卡/代金卡/优惠券抵扣部分的货款不开具发票</p>
            <p>(4) 体验卡/代金卡/优惠券不能抵扣运费</p>
            <p>(5) 体验卡/代金卡/优惠券应在券面载明的有效期内使用，过期作废</p>
            <p>(6) 如订单产生退货体验卡/代金卡/优惠券将不能使用</p>
            <p>(7) 每笔订单只能使用一张优惠券</p>
            <p>(8) 预售商品可支持使用优惠券（指定商品除外）</p>
            <p><span>(9) </span><span>部分促销活动包括但不限于：本周特惠、限时抢购等形式不支持使用优惠券</span></p>
            <p><span>(10) </span><span>同一订单，如有某件商品不能使用优惠券，而其它商品可使用优惠券，则该订单可以使用优惠券，优惠金额均摊到可使用优惠券的商品中</span></p><br>
            <h5>二、违反体验卡/代金卡/优惠券使用规则的处理</h5>
            <p style="text-indent:3vh;">本来生活有权视情况选择冻结或作废相关用户持有的体验卡/代金卡/优惠券、取消使用体验卡/代金卡/优惠券的订单、取消该用户的用券资格、停止提供服务和/或注销该用户账户并有权不接受该用户的再次注册申请：</p>
            <p><span>1) </span><span>非以个人消费为目的而使用体验卡/代金卡/优惠券的；</span></p>
            <p><span>2) </span><span>伪造、购买、销售、转让体验卡/代金卡/优惠券，或使用伪造、购买、转让的体验卡/代金卡/优惠券的；</span></p>
        </div>
        
        <div class="btn">
            <button type="primary" action-type="button" @click="paybtn()" autofocus="autofocus">购买</button>
        </div>
    </div>
</template>
<script>
	import { Cell, XInput,XButton,Card ,Checker,CheckerItem, CellFormPreview,Panel,Previewer,Box} from 'vux'
	export default {
        
		data (){
			return {
                cardones:this.cardones,
                list: [{
                    src: '',
                    w: 600,
                    h: 400
                  },
                  {
                    src: '',
                    w: 1200,
                    h: 900
                },
                  {
                    src: '',
                    w: 1200,
                    h: 900
                },
                  {
                    src: '',
                    w: 1200,
                    h: 900
                },
                  {
                    src: '',
                    w: 1200,
                    h: 900
                },
                  {
                    src: '',
                    w: 1200,
                    h: 900
                },
                  {
                    src: '',
                    w: 1200,
                    h: 900
                }],
                options: {
                    getThumbBoundsFn (index) {
                      let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                      let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                      let rect = thumbnail.getBoundingClientRect()
                      return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                    }
                }

            }
        },
        components: {
            Box,
            Previewer,
           Cell,
           XInput,
        XButton ,
            Card,
            CellFormPreview,
            Panel ,
            Checker,
            CheckerItem
        },

        beforeCreate:function(){
           let merchantId =localStorage.getItem('shopBpId');
            this.$http.post("http://192.168.100.106:8881/top/api/users/getMerchantInfo",merchantId).then(function(res){
                if(res.body.returnCode == 0){
                    var bpName=res.body.returnValue.merchantInfo.bpName;
                    window.localStorage.setItem('bpName',bpName); 
                    
                }
            },function(){
                alert('请求失败处理');   //失败处理
            }), this.$http.get("http://192.168.100.106:8881/top/api/userCard/getMerchantCards/99880000110095842").then(function(res){
                if(res.body.returnCode == 0){
                    
                    this.cardones=res.body.returnValue;
                    this.productNo=res.body.returnValue.productNo;
                    this.bpId=res.body.returnValue.bpId;
                    var a=res.body.returnValue.price;
                    
                    
                }
            },function(){
                alert('请求失败处理');   //失败处理
            })
        },
        
        methods: {
//            paybtn: function () {
//                this.$router.push('/OrderSure')
//            },
                
            paybtn: function (price) { 
                var cardSel=document.getElementsByClassName("demo2-item-selected")[0];
                var amount=cardSel.getElementsByTagName("i")[0].innerText; //卡现价
                var oldprice=cardSel.getElementsByClassName("oldprice")[0].innerText;
                var productNo=cardSel.getElementsByTagName("h2")[0].innerText;
                var cardname=cardSel.parentNode.getAttribute("cardName"); // 获取卡类型
                
                window.localStorage.setItem('price',amount);
                window.localStorage.setItem('oldprice',oldprice);
                window.localStorage.setItem('productNo',productNo);
                this.$router.push('/OrderSure')
            }

        },
//        updated:function(){  
//            var cardSel=document.getElementsByClassName("demo2-item")[0];
//            var quantity=cardSel.getElementsByTagName("h1")[0].innerText; //获取卡数量
//            if(quantity <= 0){
//                var paynot=cardSel.getElementsByTagName("em")[0].style.display="block";
//                cardSel.setAttribute("disabled","true");
//            }
//        }
    }
	</script>
<style scoped lang="less">

.demo2-item {
  width: 110px;
  height: 60px;
  border: 1px solid #ccc;
  display: inline-block;
  border-radius: 5%;
  line-height: 30px;
  text-align: center;
  margin:10px 0;
}
.demo2-item-selected {
  border-color: green;
}

.card-demo-flex {
  display: flex;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
</style>
<style>
    body{padding-bottom:9vh; background:#fff;}
    .shopinfo .weui-cell.cardName{padding:0; height:6.6vh; margin-top:2.1vh; padding-left:1.6vw;}
    .shopinfo .weui-cell:nth-child(1){margin:0;}
    .shopinfo .weui-cell:before{border-top:1px solid #d7d7d7;}
    .shopinfo .vux-checker-box>div{padding-left:3.4vw; font-size:0; margin:0 2.6vw}
    .shopinfo .vux-checker-box>div.cardLine{border-top:1px solid #d7d7d7; margin-top:2.1vh}
    .shopinfo .weui-panel{margin-top:0;}
    .shopFace img{width:100%; height:34.5vh;vertical-align:top;}
    .shopCard{margin-top:0;background-color:#efeff8;}
    .shopCardHead .weui-panel__hd{height:6.75vh; padding:0; line-height:6.75vh; font-size:2vh; margin-left:2.9vh; padding-left:5vw; color:#000; background-image:url(../assets/img/icon_cardkind@2x.png); background-size:2.7vw 1.7vh; background-repeat: no-repeat; background-position:left;}
    .shopCardHead .weui-panel__hd:after{border:0;}
    .shopCardHead .weui-panel__bd{ padding-left:8vw;}
    .cardName p{margin:0; width:16vw; font-size:1.4vh; color:#fff; background-color:#000; height:3vh; text-align:center; line-height:3vh;}
    .shopImgHead{margin-top:0; margin-left:2.9vh;}
    .shopImgHead .weui-panel__hd{height:6.75vh; padding:0; line-height:6.75vh; font-size:2vh;  padding-left:5vw; color:#000; background-image:url(../assets/img/icon_shop@2x.png); background-size:3vw 3vw; background-repeat: no-repeat; background-position:left;}
    .shopCard h4{height:5.7vh; line-height:5.7vh; font-size:1.5vh; color:#939393; padding-left:7.4vw;}
    .shopImg .previewer-demo-img{width:26.7vw; height:14.9vh; margin:1.3vw; border-radius:4%;}
    .shopImg{padding:1vh 6vw;}
    .address{background-color:#efeff8; padding-top:3vh; position:relative;} 
    .address a{width:10.7vw; height:3.75vh; position:absolute; right:15px; top: 4.5vh; background-image:url(../assets/img/icon_dingwei@2x.png); background-repeat:no-repeat; background-size:3.5vw 2.3vh; background-position:center; border-left:1px solid #d7d7d7;}
    .shopinfo .marginL{padding-left:8vw;background-color:#fff; font-size:2vh; letter-spacing:0.2vw;}
    .shopinfo .marginL .vux-cell-primary{flex:initial;}
    .shopinfo .marginL .weui-cell__ft{margin-left:1.5vw; color:#000; width:70%; text-align:left;}
    .phone{position:relative; overflow:hidden;}
    .phone a{position:absolute; width:100%; height:100%; top:0; left:15px; z-index:2;border-top:1px solid #d7d7d7;}
    .buyTips{background-color:#efeff8;}
    .shopCard .weui-cell:before{left:-20px!important;}
    .shopCard .vux-checker-item p{height:5.7vh; line-height:5.7vh; font-size:1.5vh;}
    .shopCard .vux-checker-item p>span{height:5.7vh; line-height:5.7vh; font-size:3vh; font-weight:bold}
    .shopCard .vux-checker-item>span{vertical-align:top;display:block; height:3.3vh; line-height:3.3vh; background:#c8c7cc; color:#fff; -webkit-text-size-adjust: none; font-size:1.5vh;}
    .shopCard .vux-checker-item>span b{font-weight:normal; text-decoration:line-through; margin-right:1vw;}
    .shopCard .vux-checker-item>span b h5{display: inline-block; font-weight:normal;}
    .shopCard .vux-checker-item>span i{font-style:normal; margin-left:1vw;}
    .btn{position: fixed; bottom:8vh; left:0; width:100%; height:9vh; background-color:#f5f5f9; z-index:900;}
    .shopCard .vux-checker-item em{position:absolute; top:-12%; right:-12%; background-image:url(../assets/img/icon_final@2x.png); background-repeat:no-repeat; background-position:center; background-size:cover; width:10.7vw; height:5.2vh; display:none;}
    .shopinfo .buyTips{font-size:1.5vh; color:#939393; padding-left:8vw;font-weight:normal;line-height:2.7vh;}
    .shopinfo .buyTips h4{height:6.2vh; line-height:6.2vh; font-size:2vh;}
    .shopinfo .buyTips p{display: flex;}
    
    .btn button{height:6.7vh; background-color:#b49436; margin:0 auto; width: 85.6vw; margin-top:1.1vh; border:0; border-radius:1.4vw; display:block; color:#fff; font-size:4.8vw;}
    .demo2-item-selected[data-v-25e644a0]{border-color:#000;}
    .demo2-item-selected[data-v-25e644a0]>span{background:#000;}
    
</style>

